<template>
    <article id="app">
        <section class="content-box">
            <router-view @payStatusValue="payStatusValue" @statusValue="statusValue" />
            <div id="nav" v-if="!isPath">
                <router-link to="/business">商务合作</router-link>
                <a href="javascript:void(0)" @click="getPayPage(payStatus, status)">{{perStatus}}</a>
                <router-link to="/poster"> 专属海报</router-link>
            </div>
        </section>
    </article>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { mixin_Pay } from "@/mixins/pay.js";

export default {
    name: "App",
    components: {},
    computed: {
        ...mapState([    // 使用辅助函数 mapState 
            'payStatus',   // 映射 this.payStatus为 this.$store.state.payStatus
            'status'
        ]),
        ...mapGetters([  // 使用辅助函数 mapGetters
            'perStatus',   // 映射 this.perStatus为 this.$store.getters.perStatus
            'getActivity'
        ])
    },
    mixins: [mixin_Pay],
    data() {
        return {
            isPath: "",
            pay_status: false,
            act_status: false
        };
    },
    methods: {
        getPath() {
            let self = this;
            console.log(self.$route.path);
            self.isPath = self.$route.path.split("/")[1];
        },
        payStatusValue: function(status) {
            this.pay_status = status;
        },
        statusValue: function(state) {
            this.act_status = state;
        },
        getPayPage(pay_state, act_state) {
            if (!act_state) {
                this.$Alert({ title: "活动报名", message: '请参与活动报名' });
                return false;
            }
            if (pay_state) {
                this.$Alert({ title: "信息提示", message: '该活动已购买' });
                return false;
            }
            this.$router.push({
                path: '/pay_info',
                query:{
                    id: this.getActivity.id,
                    userId: this.getActivity.userId,
                    shareId: this.getActivity.shareId,
                    payStatus: pay_state,
                    status: act_state
                }
            })
        }
    },
    watch: {
        $route: "getPath",
    },
};
</script>

<style lang="less">
@import url("@/styles/base.less");
@import url("@/styles/app.less");
img{
 width: 100%;
 object-fit: fill;
 }
</style>
